<template>
  <div class="content">
    <div class="header_box">
      <div class="header_left">ApiKey 信息</div>
      <div class="header_right">
        <el-form :inline="true" :model="searchForm" class="form_box">
          <el-form-item>
            <el-input
              v-model="searchForm.name"
              placeholder="AppKey 名称"
              style="width: 200px"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="init">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toAdd">新增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="init">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ background: '#fafbfc', color: '#bbbcc3' }"
      max-height="500"
    >
      <el-table-column type="index" :index="indexMethod" />
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="key" label="Key" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <div class="icon_content">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="编辑"
              placement="top-start"
            >
              <div class="icon_box">
                <el-icon @click="edit(row)" size="20" color="#71778d"
                  ><EditPen
                /></el-icon>
              </div>
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="删除"
              placement="top-start"
            >
              <div class="icon_box_d">
                <el-icon @click="remove(row)" size="20" color="#71778d"
                  ><Remove
                /></el-icon>
              </div>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="page_box">
      <el-pagination
        v-model:current-page="searchForm.pageNo"
        v-model:page-size="searchForm.pageSize"
        :page-sizes="[10, 50, 100, 150]"
        :small="small"
        :disabled="false"
        :background="true"
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 新增对话框 -->
    <el-dialog v-model="addVis" title="新增 AppKey" width="500">
      <el-form
        label-position="right"
        label-width="auto"
        :model="objectForm"
        style="max-width: 600px"
      >
        <el-form-item label="名称">
          <el-input v-model="objectForm.name" />
        </el-form-item>
        <el-form-item label="Key">
          <el-input v-model="objectForm.key" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addVis = false">取消</el-button>
          <el-button type="primary" @click="confirmAdd"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

const tableData = ref([
  { id: 1, name: "AppKey1", key: "123456" },
  { id: 2, name: "AppKey2", key: "abcdef" },
]);

const objectForm = ref({
  name: "",
  key: "",
});

let searchForm = ref({
  pageNo: 1,
  pageSize: 10,
});

let total = ref(0);

let addVis = ref(false);

const init = () => {
  // 初始化数据逻辑
};

const toAdd = () => {
  addVis.value = true;
};

const confirmAdd = () => {
  // 确认添加逻辑
  ElMessage.success("操作成功");
  addVis.value = false;
  init();
};

const edit = (row) => {
  // 编辑逻辑
  objectForm.value = { ...row };
  addVis.value = true;
};

const remove = (row) => {
  // 删除逻辑
  ElMessage.success("删除成功");
  init();
};

const handleSizeChange = (size) => {
  searchForm.value.pageSize = size;
  init();
};

const handleCurrentChange = (page) => {
  searchForm.value.pageNo = page;
  init();
};
</script>

<style scoped>
.header_right {
  background-color: #ffffff;
  justify-content: flex-end;
  border-radius: 0px 15px 0px 0px;
}
:deep(.form_box) {
  width: 80%;
  height: 40%;
  margin: 0px;
  display: flex;
  justify-content: flex-end;
}
.header_left {
  border-radius: 15px 0px 0px 0px;
  font-weight: 700;
}
</style> 